<!-- 表单元素 -->
<template>
  <div class="header">
    <slot name="header"> </slot>
  </div>
  <!-- :label-width="labelWidth" -->
  <el-form ref="ruleFormRef" status-icon :model="modelValue" @submit.prevent>
    <el-row>
      <template v-for="item in formItems" :key="item.label">
        <el-col v-bind="item.itemColLayout || itemColLayout">
          <el-form-item
            v-if="!item.isHidden"
            :label="item.label"
            :rules="item.rules"
            :style="item.rulesitemStyle"
            :prop="item.field"
            :label-width="item.labelWidth || '110px'"
          >
            <!-- input | password -->
            <template
              v-if="
                item.type === 'input' ||
                item.type === 'password' ||
                item.type === 'textarea'
              "
            >
              <el-input
                v-bind="item"
                :placeholder="item.placeholder"
                :show-password="item.type === 'password'"
                :show-word-limit="true"
                :model-value="modelValue[`${item.field}`]"
                clearable
                @update:model-value="valueChange($event, item.field)"
              />
            </template>
            <!-- select -->
            <template v-else-if="item.type === 'select'">
              <el-select
                :placeholder="item.placeholder"
                :model-value="modelValue[`${item.field}`]"
                :style="item.style || 'width: 100%'"
                popper-class="dark-select"
                :multiple="item.multiple || false"
                :label-width="item.labelWidth || '50px'"
                suffix-icon="CaretBottom"
                clearable
                v-bind="item"
                @update:model-value="valueChange($event, item.field)"
              >
                <el-option
                  v-for="option in item.options"
                  :key="option.value"
                  :value="option.value"
                  :label="option.label"
                >
                </el-option>
              </el-select>
            </template>
            <!-- Radio -->
            <template v-else-if="item.type == 'radio'">
              <el-radio-group
                v-bind="item"
                :model-value="modelValue[`${item.field}`]"
                @update:model-value="valueChange($event, item.field)"
              >
                <el-radio
                  v-for="option in item.options"
                  :key="option.value"
                  :label="option.value"
                  >{{ option.label }}</el-radio
                >
              </el-radio-group>
            </template>
            <!-- selectTree -->
            <template v-else-if="item.type === 'selectTree'">
              <el-tree-select
                :placeholder="item.placeholder"
                :model-value="modelValue[`${item.field}`]"
                :data="item.options"
                :render-after-expand="false"
                style="width: 100%"
                popper-class="dark-select"
                suffix-icon="CaretBottom"
                clearable
                @update:model-value="valueChange($event, item.field)"
              />
            </template>
            <!-- datepicker -->
            <template v-else-if="item.type === 'datepicker'">
              <el-date-picker
                unlink-panels
                v-bind="item.otherOptions"
                :model-value="modelValue[`${item.field}`]"
                popper-class="dark-select"
                clearable
                @update:model-value="valueChange($event, item.field)"
              />
            </template>
          </el-form-item>
        </el-col>
      </template>
      <slot name="search"></slot>
    </el-row>
  </el-form>
  <div class="footer">
    <slot name="footer"></slot>
  </div>
</template>

<script setup name="BuForm">
// 参数说明
// type IFormType = 'input' | 'password' | 'select' | 'datepicker' | 'selectTree'
//
// interface IFormOption {
//     label: string
//     value: string | number
// }
//
// export interface IFormItem {
//     field: string //字段名
//     type: IFormType //输入框类型
//     dataType?: string //输入框返回数据类型
//     label: string //输入框标题
//     rules?: any[] //输入框验证规则
//     placeholder?: any //输入框默认显示内容
//     // 针对select
//     options?: IFormOption[] //选择器的可选子选项
//     // 针对特殊属性
//     otherOptions?: any
//     // 该行是否隐藏
//     isHidden?: boolean
//     default: String // 默认值
// }
//
// export interface IForm {
//     formItems: IFormItem[]
//     labelWidth?: string
//     itemStyle?: any
//     itemColLayout?: any
// }
//
//
// // 定义属性
// interface Props {
//     formItems: [] // 表单配置项
//     labelWidth?: string // 每个表单标题宽度
//     itemStyle?: object // 每个表单样式
//     itemColLayout?: object // 表单布局
//     modelValue: object //绑定表单的每个数据
//     isHidden?: boolean
// }

// 定义初始化变量
const props = defineProps({
  formItems: {
    type: Array,
    default: () => [],
  },
  labelWidth: {
    type: String,
    default: '120px',
  },
  itemStyle: {
    type: Object,
    default: () => ({ padding: '10px 20px' }),
  },
  itemColLayout: {
    type: Object,
    default: () => ({
      xl: 4, // >=1920px
      lg: 8, // >=1200px
      md: 12, // >=992px
      sm: 24, // >=768px
      xs: 24, // <768px
    }),
  },
  modelValue: {
    type: Object,
    default: () => ({}),
  },
})

const emit = defineEmits(['update:modelValue'])

const ruleFormRef = ref()

// 定义方法
const valueChange = (value, field) => {
  emit('update:modelValue', { ...props.modelValue, [field]: value })
}

// 表单重置方法
const resetForm = () => {
  ruleFormRef.value?.resetFields()
}
//表单 是否验证通过
const validate = (cb) => {
  ruleFormRef.value.validate((valid) => {
    cb(valid)
  })
}
defineExpose({
  resetForm,
  validate,
  ruleFormRef,
  valueChange,
})
</script>

<style scoped lang="scss"></style>
